.blog {
  // 背景色-light
  --color-bg-light: #ffffff;
  // 背景色-dark
  --color-bg-dark: #0d0f12;

  background: var(--color-bg-outside);

  .setting-theme {
    position: absolute;
    top: -6rem;
    left: -9rem;
  }

  .blog-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-bottom: 8rem;
    display: flex;
    justify-content: center;
    background: var(--color-bg-light);

    .left {
      position: relative;
      width: 72%;
      max-width: 50rem;
      padding: 0 var(--margin-x-page);
      z-index: 1;
    }

    .right {
      width: 28%;
      max-width: 20rem;
      padding-left: 3rem;
      padding-right: var(--margin-x-page);
      z-index: 1;
    }
  }

  .blog-content::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-bg-dark);
    opacity: 0;
    transition: all var(--time-transition-theme);
  }
}

@media (max-width: 54rem) {
  .blog .blog-content {
    .left {
      width: 100%;
    }

    .right {
      display: none;
    }
  }
}

[data-theme='dark'] {
  .blog .blog-content::after {
    opacity: 1;
  }
}
